<template>
  <div class="container-3d-right">
    <div class="rightdom">
      <div
        class="yc-botton-show"
        v-if="!leftBottonShow"
        style="margin-top: 10px; margin-left: 10px"
        @click="
          () => {
            this.leftBottonShow = true;
            this.reloadchart();
          }
        "
      >
        <div>
          <img
            src="@/assets/img/xs-button.png"
            style="width: 28px; height: 28px"
          />
        </div>
        <div>历史温度折线图</div>
      </div>
    </div>
    <transition name="el-zoom-in-top">
      <dv-border-box-8 v-show="leftBottonShow" style="padding-top:10px;">
          <div
            class="yc-botton clearfix"
            @click="
              () => {
                this.leftBottonShow = false;
              }
            "
          >
            <img
              src="@/assets/img/yc-button.png"
              style="width: 20px; height: 20px"
            />
          </div>
          <div class="product clearfix">
            <span class="time">{{ item.time }}</span>
          </div>
          <div class="channt clearfix">
            <span>通道:</span>&nbsp;
            <b class="b1">{{ item.aisleNoShow }}</b>
            <span>_</span>
            <b class="b2"></b>&nbsp; <span>温度:</span>&nbsp;
            <b class="b3">{{ item.temp }}</b>
          </div>
          <div class="asile-echart" id="asile-echart" v-show="!loading"></div>
          <div class="asile-echart" v-show="loading">
            <dv-loading>加载中...</dv-loading>
          </div>
      </dv-border-box-8>
    </transition>
  </div>
</template>
<script>
export default {
  created() {},
  mounted() {
    this.loadCharts();
  },
  watch: {
    index(nValue) {
      this.loadCharts();
    },
  },
  props: {
    siteNo: {
      type: String,
    },
    aisleNo: {
      type: Number,
      default() {
        return 1;
      },
    },
    index: {
      type: Number,
      default() {
        return 1;
      },
    },
  },
  data() {
    return {
      loading: false,
      leftBottonShow: true,
      timelist:[],
      datalist:[],
      min:"",
      max:"",
      item: {
        time: "",
        aisleNoShow: "",
        temp: "",
      },
      option: {
        backgroundColor: "transparent",
        grid: {
          left: "15%",
          top: "10%",
          bottom: "15%",
          right: "10%",
        },
        tooltip: {
          trigger: "axis",
        },
        dataZoom: [
          {
            type: "inside",
            start: 0,
            end: 100,
          },
        ],
        yAxis: [
          {
            type: "value",
            position: "left",
            nameTextStyle: {
              color: "#00FFFF",
            },
            splitLine: {
              lineStyle: {
                type: "dashed",
                color: "rgba(135,140,147,0.8)",
              },
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              formatter: "{value}",
              color: "#fff",
              fontSize: 14,
            },
          },
        ],
        xAxis: [
          {
            type: "category",
            axisLine: {
              show: true,
              lineStyle: {
                color: "#133579",
                width: 2,
              },
            },
            splitArea: {
              color: "#f00",
              lineStyle: {
                color: "#f00",
              },
            },
            axisLabel: {
              color: "#fff",
              show: true,
              interval: "auto",
              formatter: function (value) {
                var res = value;
                if (res.length > 7) {
                  res = res.substring(10);
                }
                return res;
              },
            },
            splitLine: {
              show: false,
            },
            boundaryGap: false,
            data: [],
          },
        ],
        series: [
          {
            symbolSize: 0,
            type: "line",
            data: [],
            itemStyle: {
              normal: {
                borderWidth: 5,
                color: "#0696f9",
              },
            },
          },
        ],
      },
      $chart: Object,
    };
  },
  methods: {
    loadCharts() {
      if (!this.siteNo || !this.aisleNo || !this.index) {
        return;
      }
      this.$chart = this.$echarts.init(document.getElementById("asile-echart"));
      var url = `/redis/historyOne/${this.siteNo}/${this.aisleNo}/${this.index}/180`;
      this.loading = true;
      this.$http.get(url).then((res) => {
        if (res.data.h.code == 0) {
          this.timelist = res.data.b.time.reverse();
          this.datalist = res.data.b.data.reverse();
          this.max = Math.ceil(Math.max(...this.datalist));
          this.min = Math.floor(Math.min(...this.datalist));
          let timer =
            this.timelist[0] + "~" + this.timelist[this.timelist.length - 1].substring(10);
          this.item.temp = this.datalist[0] + "℃"; //温度
          this.item.time = timer; //时间
          this.item.aisleNoShow = this.aisleNo + "_" + this.index; //显示通道
          this.reloadchart();
        }
        this.loading = false;
      });
    },
    reloadchart(){
      this.$chart.setOption(this.option);
          this.$chart.setOption({
            xAxis: [
              {
                data: this.timelist,
              },
            ],
            yAxis: [
              {
                min: this.min,
                max: this.max,
              },
            ],
            series: [
              {
                data: this.datalist,
              },
            ],
          });
    }
  },
};
</script>
<style scoped>
.container-3d-right {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 5px;
  background: transparent;
  z-index: 3;
  color: #fff;
}
.rightdom {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 30px;
  box-sizing: border-box;
  color: #fff;
  z-index: 1;
}
.product {
  margin-top: 10px;
  padding-top: 10px;
  box-sizing: border-box;
}
.product .time {
  float: right;
  margin-right: 20px;
}
.channt {
  margin-top: 10px;
  float: right;
  margin-right: 20px;
}
.asile-echart {
  margin-top: 30px;
  height: 200px;
  width: 400px;
}
.yc-botton-show {
  width: 150px;
  height: 20px;
  font-size: 14px;
  display: flex;
  align-items: center;
}
.yc-botton {
  width: 30px;
  height: 20px;
  float: right;
  margin-right: 10px;
}
.yc-botton-show:hover {
  cursor: pointer;
}
.yc-botton:hover {
  cursor: pointer;
}
</style>